<template>
  <div class="main">
      <div class="device">
        <div @click="deviceData.show = true" class="dleft">
          <span style="font-weight:500">智能灯光控制</span>
          <!-- <img style="width: 10vw;" src="@svg/device.svg"/> -->
        </div>
        <div @click="deviceData.show = true" class="dmid">
          <span><img align="absmiddle" style="width: 5vw" src="@svg/id.svg"/>&nbsp;ID: {{deviceData.ID}}</span>
          <span><img align="absmiddle" style="width: 5vw;" src="@svg/humi.svg"/>&nbsp;光强: {{deviceData.AO}}%</span>
          <span><img align="absmiddle" style="width: 5vw;" src="@svg/mode.svg"/>&nbsp;模式: {{deviceData.mode===true?'自动':'手动'}}</span>
          <span><img align="absmiddle" style="width: 5vw;" src="@svg/set.svg"/>&nbsp;阈值: {{deviceData.setA}}%</span>       
        </div>
        <div class="dright">
            <van-switch v-model="deviceData.gpioState" size="24px" :disabled="deviceData.mode===true?true:false" :loading="deviceData.gload" @change="onGPIOChange(deviceData)" />    
        </div>
        <van-action-sheet style="height:80v;text-align: left;" v-model="deviceData.show" title="节点设置">
          <div class="content">
            <van-cell-group>
              <van-cell title="节点ID" size="large" :value="deviceData.ID" />
              <van-cell title="当前光强" size="large" :value="deviceData.AO+'%'" />
              <van-cell center size="large" :label="deviceData.mode===true?'自动':'手动'"  title="模式选择">
                  <template #right-icon>
                      <van-switch v-model="deviceData.mode" size="24" @change="onModeChange(deviceData)" :loading="deviceData.mload" />
                  </template>
              </van-cell>
              <van-cell center size="large" :label="deviceData.gpioState===true?'开启':'关闭'" title="灯光开关">
                  <template #right-icon>
                      <van-switch v-model="deviceData.gpioState" :loading="deviceData.gload" @change="onGPIOChange(deviceData)" :disabled="deviceData.mode===true?true:false" size="24" />
                  </template>
              </van-cell>
              <van-divider>光强阈值</van-divider>
              <van-slider v-model="deviceData.setA" @change="onAChange(deviceData)" :disabled="deviceData.sload" active-color="#0aadee">
                <template #button>
                  <div class="custom-button">{{ deviceData.setA }}</div>
                </template>
              </van-slider>
              <p style="font-size:3vw;text-align:center;margin-top:20px">说明：当光强小于设定阈值时，灯光将会打开。</p>
            </van-cell-group>
          </div>
        </van-action-sheet>
      </div>
  </div>
</template>

<script>
import mqtt from 'mqtt'
//import { Dialog } from 'vant';
import { Toast } from 'vant';
var client
const options = {
    connectTimeout: 40000,
    clean: true
  }
 client = mqtt.connect('ws://121.5.58.100:8083/mqtt', options)
export default {
  name: 'Device',
  props: {
    id:String
  },
  components :{
  },
  created: function() {
      this.mqttMsg()
  }, 
  data() {
    return {
      gpioc: '',
      modec: '',
      setAc: '',
      isLoad: false,
      checked: false,
      show:true,
      value: 0,
      send: '',
      param: '',
      flag: true,
      num: '',
      deviceData: {
        ID: this.id,
        AO:'--',
        DO: '--',
        mode:null,
        gpioState:null,
        show: false,
        gload: false,
        mload: false,
        sload: false,
        setA: 0
      },
    }
  },
  methods: {
    onGPIOChange(detail) {
      this.deviceData.gload = true
      this.param = '{"ID":'+this.deviceData.ID+',"gpioState":'+(detail.gpioState===true?1:0)+',"setA": -1,"modeFlag": -1}'
      console.log(this.param)
      client.publish('wsn/control', this.param)
      this.gpioc=setInterval(() => {
        client.publish('wsn/control', this.param)
      }, 2500)
    },
    onModeChange(detail) {
      this.deviceData.mload = true
      this.param = '{"ID":'+this.deviceData.ID+',"modeFlag":'+(detail.mode===true?1:0)+',"setA":-1,"gpioState":-1}'
      console.log(this.param)
      client.publish('wsn/control', this.param)
      this.modec=setInterval(() => {
        client.publish('wsn/control', this.param)
      }, 2500)
    },
    onAChange(detail) {
      this.deviceData.sload = true
      this.param = '{"ID":'+this.deviceData.ID+',"setA":'+detail.setA+',"modeFlag":-1,"gpioState":-1}'
      console.log(this.param)
      client.publish('wsn/control', this.param)
      this.setAc=setInterval(() => {
        client.publish('wsn/control', this.param)
      }, 2500)
    },
    mqttMsg() {
      client.on('connect', () => {
        console.log("连接成功！！！")
        client.subscribe('wsn/info', { qos: 0 }, (error) => {
          if (!error) {
            console.log('订阅成功')
          } else {
            console.log('订阅失败')
          }
        })
      })
      // 接收消息处理
      client.on('message', (topic, message) => {
        console.log(message.toString())   //控制台显示接收到的数据
        this.data = message.toString()
        this.res = JSON.parse(message.toString())
        if(this.res.Type === 'A-D-GPIO-Light') {
            this.deviceData.ID = this.res.ID;
            this.deviceData.AO = this.res.A.toFixed();
            this.deviceData.DO = this.res.D;
            if(this.deviceData.sload) {
            if(this.deviceData.setA === this.res.setA) {
                this.deviceData.sload=false
                clearInterval(this.setAc);
                Toast.success('阈值设定成功')
            }
            else {
                console.log(this.param)
                client.publish('wsn/control', this.param)
            }
            }
            else {
            this.deviceData.setA = this.res.setA;
            }
            if(this.deviceData.mload) {
            if(this.deviceData.mode === (this.res.modeFlag===1?true:false)) {
                this.deviceData.mload=false
                clearInterval(this.modec);
                Toast.success('模式设定成功')
            }
            else {
                console.log(this.param)
                client.publish('wsn/control', this.param)
            }
            }
            else {
            this.deviceData.mode = this.res.modeFlag===1?true:false;
            }     
            if(this.deviceData.gload) {
                if(this.deviceData.gpioState === (this.res.gpioState===1?true:false)) {
                    this.deviceData.gload=false
                    clearInterval(this.gpioc);
                    Toast.success('灯光设置成功')
                }
                else {
                    console.log(this.param)
                }
            }
            else {
                this.deviceData.gpioState = this.res.gpioState===1?true:false;
            }
        }
        })
    },
  }
}
</script>
<style scoped>
.content {
  padding: 10px 16px;
}
.main{
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.device {
  width: 85vw;
  height: 28vw;
  display: flex;
  justify-content:left;
  align-items:center;
  border-radius: 20px;
  margin: auto;
  margin-bottom: 20px;
  text-align: left;
  padding: 10px 10px;
  background-color: white;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.9);
}
.dleft {
  flex: 0 0 20vw;
  width: 50px;
  text-align: center;
  order: -1; /* 让 #left 居于左侧 */
}
.dmid {
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 10px;
  font-size: 4vw;
}
.dright {
  flex: 0 0 20vw;
  text-align: center;
}
.custom-button {
  width: auto;
  padding: 5px 10px;
  color: #fff;
  font-size: 4vw;
  line-height: 5vw;
  text-align: center;
  background-color: #0aadee;
  border-radius: 20px;
}
</style>
